/**
 * 工作台
 * Created by Administrator on 2017/10/13.
 */
/**

 */
import React from 'react';
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Grid, Icon, Badge, Toast, Carousel, WhiteSpace, WingBlank } from 'antd-mobile';
import styles from './index.less';
import banner from '../../assets/work/banner1.png';



const empty = require('is-empty');
const GridSvg = [
  {icon: <Icon size="md" type={require('../../svgs/home/manjc.svg')} />, text: `个人信息`, color:'#44C288'},
  {icon: <Icon size="md" type={require('../../svgs/home/huodongguanli.svg')} />, text: `组织生活`, color:'#EDCA6A'},
  {icon: <Icon size="md" type={require('../../svgs/home/moneyjc.svg')} />, text: `党费交纳`, color:'#F47E4B'},
  {icon: <Icon size="md" type={require('../../svgs/home/relationjc.svg')} />, text: `组织关系`, color:'#00B2FF'},
  {icon: <Icon size="md" type={require('../../svgs/home/learningjc.svg')} />, text: `在线学习`, color:'#F47E4B'},
  {icon: <Icon size="md" type={require('../../svgs/home/pagejc.svg')} />, text: `制度速查`, color:'#87CF76'},
  {icon: <Icon size="md" type={require('../../svgs/home/communicationjc.svg')} />, text: `沟通交流`, color:'#DDC68A'},
  {icon: <Icon size="md" type={require('../../svgs/home/rankingsjc.svg')} />, text: `个人积分`, color:'#FF9F04'},
];
const GridSvg1 = [
  {icon: <Icon size="md" type={require('../../svgs/home/zuzhi.svg')} />, text: `组织管理`, color:'#44C288'},
  {icon: <Icon size="md" type={require('../../svgs/home/dygl.svg')} />, text: `党员管理`, color:'#EDCA6A'},
  {icon: <Icon size="md" type={require('../../svgs/home/dangfeiguanli.svg')} />, text: `党费管理`, color:'#F47E4B'},
  {icon: <Icon size="md" type={require('../../svgs/home/huodongguanli.svg')} />, text: `活动管理`, color:'#00B2FF'},
  {icon: <Icon size="md" type={require('../../svgs/home/renwuguanli.svg')} />, text: `任务管理`, color:'#F47E4B'},
  {icon: <Icon size="md" type={require('../../svgs/home/guanxizhuanjie.svg')} />, text: `关系转接`, color:'#87CF76'},
  {icon: <Icon size="md" type={require('../../svgs/home/dangjianjiandu.svg')} />, text: `党建监督`, color:'#DDC68A'},
  {icon: <Icon size="md" type={require('../../svgs/home/mzpy.svg')} />, text: `民主评议`, color:'#FF9F04'},
  {icon: <Icon size="md" type={require('../../svgs/home/dangyuanbangfu.svg')} />, text: `党员帮扶`, color:'#44C288'},
  {icon: <Icon size="md" type={require('../../svgs/home/dangwubaogao.svg')} />, text: `党务报告`, color:'#EDCA6A'},
  {icon: <Icon size="md" type={require('../../svgs/home/rankingsjc.svg')} />, text: `积分排行`, color:'#F47E4B'},

];
const GridSvg2 = [
  {icon: <Icon size="md" type={require('../../svgs/home/gonghuiguanli.svg')} />, text: `工会管理`, color:'#44C288'},
  {icon: <Icon size="md" type={require('../../svgs/home/tuanweiguanli.svg')} />, text: `团委管理`, color:'#EDCA6A'},
  {icon: <Icon size="md" type={require('../../svgs/home/luru.svg')} />, text: `活动录入`, color:'#F47E4B'},

];

class Work extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data:['','',''],
      model: [],
      codes_org:''
    };
  }
  a=()=>{
    return(
      <div className="sub-title">
        <div style={{fontSize:'0.35rem',marginLeft:'0.2rem',color:'#000'}}><Icon size="sm" style={{verticalAlign:'bottom'}} type={require('../../svgs/work/sx.svg')} />&nbsp;&nbsp;&nbsp;党员服务</div>
        <WhiteSpace size="md"/>
      <Grid data={GridSvg} hasLine={false} renderItem={(dataItem, index) =>{
        return(
          <a >
            <div className="am-grid-item-contain column-num-4" style={{textAlign:'center'}}>
              <div style={{ backgroundColor:`${dataItem.color}`, borderRadius:'50%',width:'1rem', height:'1rem', display: 'inline-flex', justifyContent: 'center', alignItems: 'center'}}>
                {dataItem.icon}
              </div>
              <div className="am-grid-text" style={{fontSize:'0.3rem',marginTop:'0.2rem'}}>{dataItem.text}</div>
            </div>
          </a>
      )}}
            onClick={(item,index) => {//个人信息跳转
              switch(index) {
                case 0: this.props.dispatch(
                  routerRedux.push({
                    pathname: `/work/myinformmation`,
                    query: {}
                  })
                );
                  break;
                case 1: this.props.dispatch(
                  routerRedux.push({
                    pathname: `/work/life`,
                    query: {}
                  })
                );
                  break;
                case 2: this.props.dispatch(
                  routerRedux.push({
                    pathname: `/work/dues`,
                    query: {}
                  })
                );
                  break;
                case 3: this.props.dispatch(
                  routerRedux.push({
                    pathname: `/work/zzgx`,
                    query: {}
                  })
                );
                  break;
                case 4: this.props.dispatch(
                  routerRedux.push({
                    pathname: `/work/zxxx`,
                    query: {}
                  })
                );
                  break;
                case 5: this.props.dispatch(
                  routerRedux.push({
                    pathname: `/work/zdsc`,
                    query: {}
                  })
                );
                  break;
                case 6: this.props.dispatch(
                  routerRedux.push({
                    pathname: `/work/communication`,
                    query: {}
                  })
                );
                  break;
                case 7: this.props.dispatch(
                  routerRedux.push({
                    pathname: `/work/grjf`,
                    query: {}
                  })
                );
                  break;
                default: break;
              }
            }}
      />
      </div>
    )
  }
  b=()=>{
    return(
      <div className="sub-title">
        <div style={{fontSize:'0.35rem',marginLeft:'0.2rem',color:'#000'}}><Icon size="sm" style={{verticalAlign:'bottom'}} type={require('../../svgs/work/sx.svg')} />&nbsp;&nbsp;&nbsp;党务管理</div>
        <WhiteSpace size="md"/>
      <Grid data={GridSvg1} hasLine={false} renderItem={(dataItem, index) => (
        <a href={this.state.herf}>
          <div className="am-grid-item-contain column-num-4" style={{textAlign:'center'}}>
            <div style={{ backgroundColor:`${dataItem.color}`, borderRadius:'50%',width:'1rem', height:'1rem', display: 'inline-flex', justifyContent: 'center', alignItems: 'center'}}>
              {dataItem.icon}
            </div>
            <div className="am-grid-text" style={{fontSize:'0.3rem',marginTop:'0.2rem'}}>{dataItem.text}</div>
          </div>
        </a>

      )}
             onClick={(item,index) => {
        switch(index) {
          case 0: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/zzadminister`,
              query: {}
            })
          );

            break;
          case 1: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/dyadminister`,
              query: {}
            })
          );
            break;
          case 2: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/dfadminister`,
              query: {}
            })
          );
            break;
          case 3: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/hdadminister`,
              query: {}
            })
          );
            break;
          case 4: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/rwadminister`,
              query: {}
            })
          );
            break;
          case 5: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/relation`,
              query: {}
            })
          );
            break;
          case 6: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/djsupervises`,
              query: {}
            })
          );
            break;
          case 7: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/democraticappraisal`,
              query: {}
            })
          );
            break;
          case 8: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/dysupportxx`,
              query: {}
            })
          );
            break;
          case 9: this.props.dispatch(
            routerRedux.push({
              pathname: `/work/dwreportlist`,
              query: {}
            })
          );
            break;
             case 10: this.props.dispatch(
                 routerRedux.push({
                   pathname: `/work/partyofintegralxx`,
                   query: {}
                 })
               );
               break;
          default: break;
        }
      }}
            />
      </div>
    )
  }
  c=()=>{
    return(
      <div className="sub-title" style={{}}>
        <div style={{fontSize:'0.35rem',marginLeft:'0.2rem',color:'#000'}}><Icon size="sm" style={{verticalAlign:'bottom'}} type={require('../../svgs/work/sx.svg')} />&nbsp;&nbsp;&nbsp;团队管理</div>
        <WhiteSpace size="md"/>
      <Grid data={GridSvg2} hasLine={false} renderItem={(dataItem, index) => (
        <div className="am-grid-item-contain column-num-3" style={{textAlign:'center'}}>
          <div style={{ backgroundColor:`${dataItem.color}`, borderRadius:'50%',width:'1rem', height:'1rem', display: 'inline-flex', justifyContent: 'center', alignItems: 'center'}}>
            {dataItem.icon}
          </div>
          <div className="am-grid-text" style={{fontSize:'0.3rem',marginTop:'0.2rem'}}>{dataItem.text}</div>
        </div>
       )}
     onClick={(item,index) => {
          switch(index) {
            case 0: this.props.dispatch(
              routerRedux.push({
                pathname: `/work/orgArchitecture`,
                query: {}
              })
            );
              break;
            case 1: this.props.dispatch(
              routerRedux.push({
                pathname: `/work/taskManage`,
                query: {}
              })
            );
              break;
            case 2: this.props.dispatch(
              routerRedux.push({
                pathname: `/work/workLog`,
                query: {}
              })
            );
              break;
            case 3: this.props.dispatch(
              routerRedux.push({
                pathname: `/work/InforRelease`,
                query: {}
              })
            );
              break;
            default: break;
          }
         }}
         />
      </div>
    )
  }

// 点击小卡片
  onCardClick=(info)=>{
    console.log(info,'info')
  };
  render() {
    let d =[];
    d.push(this.a(),this.b(),this.c())
    console.log(d,'aaaaaaaaaaaaaaaa')
    return (
      <div className={styles.headImgBox}>
        <div className="selfItemHight">
          <div className={styles.grids}>
            {/*顶部图片*/}
            <div style={{marginBottom:'0.2rem'}}><img src={banner} style={{width:'100%'}}/></div>
            {/*滑动显示*/}
              <Carousel
                className="my-carousel"
                autoplay={false}
                infinite
                selectedIndex={1}
                // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                afterChange={index => console.log('slide to', index)}
              >
                {d.map(ii => (<div style={{height:'7rem'}}>{ii}</div>))}

              </Carousel>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps({ infor,workLog,login }){
  return {
    infor,
    workLog,
    codes_org:login.codes
	};
}
export default connect(mapStateToProps)(Work);
